<template>
  <div id="touriestData">
    <div class="nav-top">
      共計
      <span style="color: #f9e639; font-weigth: bold">{{ num }}</span>
      讲解人数
    </div>
    <div class="echarts" ref="main" style="height: 160%"></div>
  </div>
</template>

<script>
import echarts from "@/echarts/index";
export default {
  name: "touriestData",
  data() {
    return {
      num: 0,
    };
  },
  props: {
    peopelNum: {
      type: Number,
    },
  },
  watch: {
    "$props.peopelNum"(val) {
      this.num = val;
    },
  },
  mounted() {
    this.InitEcharts();
  },
  methods: {
    InitEcharts() {
      let myecharts = echarts.init(this.$refs.main);
      let option = {
        xAxis: {
          type: "category",
          data: [
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [60, 20, 51, 10, 20, 80, 80, 20, 41, 100],
            type: "line",
          },
        ],
      };
      option && myecharts.setOption(option);
      window.onresize = function () {
        myecharts.resize();
      };
    },
  },
};
</script>

<style scoped lang="scss">
#touriestData {
  width: 100%;
  height: 100%;
  .nav-top {
    color: #9baad0;
    text-align: center;
  }
}
.echarts {
  width: 100%;
  height: 100%;
  margin-top: -50px;
}
</style>